<template>
  <div class="myIntegral">
    <div class="clearFloat">
      <!--我的积分-->
      <div class="integrals">
        <div class="titleDiv">
          <p>积分记录</p>
        </div>
        <div v-for="(item,index) in integralList" class="integrals-c">
          <img :src="$store.state.prefixImg+item.fileUrl" alt="">
          <div class="c-c">
            <div class="integrals-tit ycyc">{{item.name}}</div>
            <div class="integrals-tm">{{item.time}}</div>
          </div>
          <div class="integrals-i">+{{item.integral}}</div>
        </div>
        <!--分页器-->
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="pagination.currentPage"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="pagination.total"
          prev-text="上一页"
          next-text="下一页"
          style="float: right;margin: 12px 30px 0 0">
        </el-pagination>
      </div>
      <!--排行-->
      <div class="ques-card-list">
        <div class="titleDiv">
          <p>积分排行</p>
        </div>
        <ul style="padding-left: 0;">
          <li :class="item.rank==1?'ques-card-list-noe':item.rank == 2?'ques-card-list-two':item.rank ==3?'ques-card-list-three':''"
              v-for="(item,index) in rankingList">
            <div class="ques-list-box clearfix">
              <div class="ques-list-head">
                <div class="ques-list-image">
                  <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
                </div>
              </div>
              <div class="ques-list-name">
                <div class="ques-list-name-head">  {{item.companyName}}</div>
                <div class="ques-list-name-text"> 积分: {{item.integral || 0}}</div>
              </div>
              <span class="ques-list-name-icon" :class="item.rank==1?'item-icon001':item.rank==2?'item-icon002':item.rank==3?'item-icon003':'item-icon004'">
              <template v-if="item.rank==1">
                <img src="../../assets/images/user/no.1.png" height="60" width="60"/>
              </template>
              <template v-if="item.rank==2">
                <img src="../../assets/images/user/no.2.png" height="60" width="60"/>
              </template>
              <template v-if="item.rank==3">
                <img src="../../assets/images/user/no.3.png" height="60" width="60"/>
              </template>
              <template v-if="item.rank!=1&&item.rank!=2&&item.rank!=3">
                {{item.rank}}
              </template>
            </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import {queryIntegralRank,queryIntegralRecord} from '@/request/api'
  export default {
    data(){
      return {
        listTit: ['排行','记录'],
        demo: '排行',
        listIndex: 0,
        rankingList: [],
        integralList: [],
        /*   -------分页-------- */
        pagination: {
          currentPage: 1,//当前页
          total: 0//共多少条
        },
      }
    },
    mounted() {
      this.getList1()
      this.getList2()
    },
    methods: {
//        积分记录
      getList1() {
        const loading = this.openLoading();
          var params = {
            "_search": true,
            "bgTm": "",
            "data": {
              "userId": JSON.parse(localStorage.getItem('userInfo')).id
            },
            "endTm": "",
            "pageNumber": this.pagination.currentPage,
            "pageSize": 10
          }
        queryIntegralRecord(params).then(res=> {
          if(res.code == 200) {
            this.pagination.total = res.data.total
            if(res.data.records.length!=0) {
              this.integralList = res.data.records
            }else {
              this.$message({
                message: '暂无积分记录',
                type: 'warning',
                offset: '500'
              });
            }
//            this.pagination.total = res.data.total
          }
          loading.close();
        }).catch(() => {
          loading.close();
        })
      },
      //        积分排行
      getList2() {
        const loading = this.openLoading();
        var params = {
          "_search": true,
          "bgTm": "",
          "data": {},
          "endTm": "",
          "pageNumber": 1,
          "pageSize": 10,
          "selected": "",
          "selectedType": "",
          "status": '',
          "type": ""
        }
        queryIntegralRank(params).then(res=> {
          if(res.code == 200) {
            if(res.data.records.length!=0) {
              this.rankingList = res.data.records
            }else {
              this.$message({
                message: '暂无积分排行',
                type: 'warning',
                offset: '500'
              });
            }
          }
          loading.close();
        }).catch(() => {
          loading.close();
        })
      },
      //      换页
      handleCurrentChange(val) {
        this.pagination.currentPage = val
        this.getList1()
      },
    }
  }
</script>
<style scoped>
  .myIntegral{
    width: 1200px;
  }
  li {
    list-style: none
  }
  p,ul{
    margin:0;
  }
  .titleDiv{
    width:100%;
    height:60px;
    border-bottom:1px solid #E5E5E5;
  }
  .titleDiv p{
    font-size:20px;
    color:#343434;
    font-weight: bold;
    height:60px;
    line-height:60px;
    padding-left:54px;
    box-sizing: border-box;
    position: relative;
    margin-right:60px;
  }
  .titleDiv p:before{
    content: "";
    position: absolute;
    width: 4px;
    height: 24px;
    background: #22944E;
    top: 20px;
    left: 27px
  }
    .ques-section{
      width: 960px;
      margin: 0 auto 10px;
      padding: 20px;
      border-radius: 2px;
      background-color: #fff;
    }
    .ques-section-item{
      width: 293px;
      position: relative;
      float: left;
    }
    .ques-item-title{
      font-size: 18px;
      line-height: 24px;
      margin-bottom: 15px;
      font-weight:normal;
      color:#333;
    }

    .ques-section-card{
      position: relative;
      height: 424px;
      text-align: center;
      border: 1px solid #f2f2f2;
      border-radius: 2px;
      background-color: #fafafa;
    }
    .ques-card-head{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 30px;
      padding-top: 48px;
      border-radius: 2px 2px 0 0;
    }

    .ques-card-gul{
      background-color: #f55727;
      background-image: -webkit-radial-gradient(50% 3%,circle,#f07a56,#f55727);
      background-image: radial-gradient(circle at 50% 3%,#f07a56,#f55727);
      height:78px;
    }
    .ques-card-org{
      background-color: #f59b00;
      background-image: -webkit-radial-gradient(50% -6%,circle,#ffb83d 2%,#f59b00);
      background-image: radial-gradient(circle at 50% -6%,#ffb83d 2%,#f59b00);
      height:78px;
    }
    .ques-card-bul{
      background-color: #397bee;
      background-image: -webkit-radial-gradient(50% -45%,circle,#53a7f5,#397bee);
      background-image: radial-gradient(circle at 50% -45%,#53a7f5,#397bee);
      height:78px;
    }
    .ques-card-text{
      line-height: 18px;
      position: relative;
      margin-top: 6px;
      opacity: .7;
      color: #fff;
      font-weight: normal;
    }
    .ques-card-num{
      overflow: hidden;
      margin: 40px auto 0;
      border-radius: 50%;
      position: relative;
      display: block;
      width: 80px;
      height: 80px;
    }

    .ques-card-num:before {
      position: absolute;
      top: 0;
      left: 0;
      width: 76px;
      height: 76px;
      content: '';
      border: 2px solid rgba(255,255,255,.9);
      border-radius: 100%;
    }
    .ques-card-num:hover:before {
      background-color: rgba(0,0,0,.3);
    }

    .ques-card-num img{
      width:100%;
      height:auto;
      display:block;
      border:none;
    }
    .ques-card-name{
      font-size: 18px;
      line-height: 24px;
      margin-top: 10px;
    }
    .ques-card-major{
      line-height: 18px;
      margin-top: 6px;
      color: #a3a3a3;
    }
    .ques-card-field{
      font-size: 12px;
      line-height: 18px;
      height: 18px;
      margin-top: 25px;
      text-align: center;
      color: #000;
    }
    .ques-card-tag{
      font-size: 12px;
      margin: 6px 0 25px;
    }
    .ques-card-tag span{
      line-height: 17px;
      display: inline-block;
      max-width: 84px;
      height: 18px;
      padding: 0 6px;
      color: #fa9600;
      border: 1px solid #f5cc84;
      border-radius: 2px;
      margin: 0 4px;
    }

    .ques-card-help{
      display: block;
      margin: 20px auto;
      line-height: 29px;
      width: 90px;
      height: 30px;
      text-align: center;
      color: #fff;
      border-radius: 2px;
      background-color: #2fa9f1;
    }
    .ques-card-bots{
      line-height: 18px;
      margin-top: 25px;
      color: #a3a3a3;
    }
    .ques-section-item+.ques-section-item {
      margin-left: 20px;
    }
    .ques-card-list{
      text-align:left;
      width: calc( 100% - 700px );
      float:left;
      background:#fff;
    }

    .ques-card-list li{
      position: relative;
    }

    .ques-card-list-noe:before {
      position: absolute;
      z-index: 2;
      top: 8px;
      left: 71px;
      display: block;
      content: '';
      background-position: -115px -44px;
      width: 20px;
      height: 20px;
      background-image:url("../../assets/images/user/icon-body.png");
    }

    .ques-card-list-three:before {
      position: absolute;
      z-index: 2;
      top: 8px;
      left: 71px;
      display: block;
      content: '';
      background-position: -115px -88px;
      width: 20px;
      height: 20px;
      background-image:url("../../assets/images/user/icon-body.png");
    }

    .ques-card-list li:after {
      /*position: absolute;
      bottom: 0;
      left: 10px;
      display: block;
      width: 100%;
      height: 1px;
      content: '';
      background-color: #ededed;*/
    }
    .ques-list-box{
      position: relative;
      display: block;
      height: 100px;
      padding: 20px 30px;
      border-bottom: 1px solid #E5E5E5;
      box-sizing: border-box;
    }
    .ques-list-head{
      position: relative;
      float: left;
      padding-right: 8px;
    }
    .ques-list-image{
      position: relative;
      display: block;
      width: 60px;
      height: 60px;
      z-index: 2;
      margin: 0 auto;
    }
    .ques-list-image:before {
      position: absolute;
      top: 0;
      left: 0;
      width: 57px;
      height: 57px;
      content: '';
      border: 2px solid #f87851;
      border-radius: 100%;
    }
    .ques-list-image img{
      border-radius: 100%;
      width:100%;
      height:auto;
      display:block;
      border:none;
    }
    .ques-list-name{
      overflow: hidden;
      margin-right: 33px;
    }
    .ques-list-name-head{
      font-size: 20px;
      font-weight: bold;
      color: #343434;
      margin-bottom: 12px;
    }
    .ques-list-name-text{
      font-size: 16px;
      font-weight: 400;
      color: #9A9A9A;
    }
    .ques-list-name-icon{
      line-height: 24px;
      position: absolute;
      top: 50%;
      right: 30px;
      display: block;
      margin-top: -13px;
      text-align: center;
      background-position: 0 -60px;
      /*background-image:url("../../assets/images/user/icon-body.png");*/
      font-size: 44px;
      font-weight: 400;
      color: #343434;
      width: 60px;
      height: 60px;
      text-align: center;
    }

    /*.item-icon001{
      background-position: -62px -27px;
      width: 25px;
      height: 25px;
      display:block;
    }

    .item-icon002{
      background-position: -62px 0;
      width: 25px;
      height: 25px;
    }

    .item-icon003{
      background-position: -28px -32px;
      width: 25px;
      height: 25px;
    }
    .item-icon004{
      background-position: 0 -60px;
      width: 25px;
      height: 25px;
    }
    .item-icon005{
      background-position: 0 -60px;
      width: 25px;
      height: 25px;
    }*/

  .item-icon001,.item-icon002,.item-icon003{
    margin-top:-32px;
  }

    .ques-list-box:hover {
      cursor: pointer;
      background-color: #f5f5f5;
    }
    .ques-card-list-two:before {
      background-position: -115px -66px;
      width: 20px;
      height: 20px;
      position: absolute;
      z-index: 2;
      top: 8px;
      left: 71px;
      display: block;
      content: '';
      background-image:url("../../assets/images/user/icon-body.png");
    }
    .my-ques {
      position: fixed;
      bottom: 54px;
      width: 100%;
      background: #c6e3ef;
      z-index: 99;
      border-top: 2px solid #ccc;
    }
  .integrals {
    width: 670px;
    float: left;
    background:#fff;
    margin-right:30px;
  }
  .integrals-c {
    width: 100%;
    height: 100px;
    padding: 20px 30px;
    border-bottom: 1px solid #E5E5E5;
    box-sizing: border-box;
    position: relative;
  }
  .integrals-c:last-child,.ques-card-list li:last-child .ques-list-box{
    border-bottom: 0;
  }
  .integrals-c img {
    width: 90px;
    height: 60px;
    margin-right: 20px;
    vertical-align: middle;
    /*border-radius:50%;*/
  }
  .integrals-c .c-c {
    vertical-align: middle;
    display: inline-block;
    height: 50px;
    width: 350px;
  }
  .integrals-c .integrals-tit {
    font-size: 20px;
    font-weight: bold;
    color: #343434;
    margin-bottom:12px;
  }
  .integrals-c .integrals-tm {
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    color: #9A9A9A;
  }
  .integrals-c .integrals-i {
    position: absolute;
    right: 20px;
    top: 37px;
    font-size: 28px;
    color: #343434;
  }

  .pageDiv{
    width:80px;
    height:30px;
    border:1px solid #13893E;
    border-radius:4px;
    cursor:pointer;
    margin:15px 30px 0 0 !important;
  }
  .pageDiv i{
    width:40px;
    height:30px;
    line-height:30px;
    text-align: center;
  }
  .pageDiv /deep/ .el-icon-arrow-left{
    color:#13893E;
    font-weight: bold;
    background:#fff;
    border-radius:4px 0 0 4px;
  }
  .pageDiv /deep/ .el-icon-arrow-right{
    color:#fff;
    font-weight: bold;
    background:#13893E;
    border-radius:0 4px 4px 0;
  }
</style>
